
<template>
  <div class="newApp">
    <div class="enemyinfo">
      <div class="Item">
        <van-image round width="4rem" class="img" height="4rem" :src="getImageUrlItem" />
        <div class="ItemRight">
          <div class="ItemName">{{ monsterInfo.name }}</div>
          <div class="ItemHp">
            <van-row gutter="20"><van-col :span="2">HP </van-col><van-col :span="14">


                <van-progress :percentage="monsterpercent" color="#ee0a24" :show-info="false" />

              </van-col>
              <van-col :span="6"><span>{{ monsterHP }}/{{ monsterInfo.HP }}</span></van-col>
            </van-row>
          </div>
          <div class="ItemSp">
            <van-row gutter="20"><van-col :span="2">SP </van-col><van-col :span="14">

                <van-progress :percentage="monsterpercentsp" strokeColor="#1890FF" :show-info="false" />

              </van-col><van-col :span="6"><span>{{ monsterSP }}/{{ monsterInfo.Mana }}</span></van-col></van-row>
          </div>
          攻击:{{ monsterInfo.aggressivity }} 防御:{{ monsterInfo.defense }}攻速{{
            monsterInfo.speed
          }}
        </div>
      </div>
    </div>
    <div v-for="(item, index) in speedList" :key="index" style="padding: 10px">
      <span :style="{
        color: item.info == 'user' ? '#1890ff' : '#F56C6C'
      }">
        {{ item.name }}</span>使用了<span :style="{
          color: item.info == 'user' ? '#67C23A' : '#E6A23C'
        }">{{ item.skill }}</span>,
      <span v-if="item.type == '心法'">
        {{ item.status == 'aggressivity' ? '攻击力增加' : ''
        }}<span style="color: #16b8e6">{{ item.value }}</span>倍
      </span>
      <span v-else style="color: #16b8e6"> 造成伤害{{ item.value }} </span>
    </div>
    <div class="userInfo">
      <div class="Item">
        <van-image round width="4rem" class="img" height="4rem" :src="getImageUrl" />
        <div class="ItemRight">
          <div class="ItemName">{{ userInfo.name }}</div>
          <div class="ItemHp">
            <van-row gutter="20"><van-col :span="2">HP </van-col><van-col :span="14">
                <van-progress :percentage="usepercent" color="#ee0a24" :show-info="false" />
              </van-col>
              <van-col :span="6"><span>{{ userHP }}/{{ userInfo.HP }}</span></van-col>
            </van-row>
          </div>
          <div class="ItemSp">
            <van-row gutter="20"><van-col :span="2">SP </van-col><van-col :span="14">
                <van-progress :percentage="usepercentsp" color="#1890FF" :show-info="false" />
              </van-col><van-col :span="6"><span>{{ userSP }}/{{
                userInfo.Mana }}</span></van-col></van-row>
          </div>
          攻击:{{ userInfo.aggressivity }} 防御:{{ userInfo.defense }}攻速{{ userInfo.speed }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup  lang="ts" >
import {
  getAssetURL,
  equipFindOne,
  getRealm,
  getMonsterOne,
  getMaterialOne,
  getsSkillsOne
} from '@/utils/index.ts'
import { addArticle } from '@/api/system/article.ts'
import useUserStore from '@/store/modules/user'
import { useWinSize } from '@/utils/win.ts'
import { notification } from 'ant-design-vue'
import { ref, defineProps, computed, onMounted ,nextTick} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import animation from './animation.vue'
import animation2 from './animation2.vue'
import anumationInfo from './anumationInfo.vue'

import { showDialog } from 'vant'
const getImageUrl = ref<any>('')
const getImageUrlItem = ref<any>('')
const size = useWinSize()
const userInfo = ref<any>({})
interface MonsterData {
  name?: String
  aggressivity?: String
  HP?: String
  defense?: String
  Mana?: String
  speed?: String
  fortune?: String
  Skills?: String
}
const isLook = ref<boolean>(true)
const monsterInfo = <any>ref({})
const route = useRoute()
const router = useRouter()
//技能相关
// 怪物技能名称
const userList1 = ref<any[]>([])
//怪物效果
const userListinfo1 = ref<any[]>([])
//血量相关
const monsterHP = ref<any>('')
const monsterSP = ref<any>('')
const userHP = ref<any>('')
const userSP = ref<any>('')
// 血量比例
const monsterpercent = ref<any>(100)
const usepercent = ref<any>(100)
const monsterpercentsp = ref<any>(100)
const usepercentsp = ref<any>(100)
// 创建响应式的战斗频率变量
const battleFrequency = ref<any>(0)
const MONSTER_HP_DECREASE = ref<any>(20)
const MONSTER_SP_DECREASE = ref<any>(10)
const USER_HP_DECREASE = ref<any>(10)
const USER_SP_DECREASE = ref<any>(10)
const round1 = ref<any>(0)//用户回合
const round2 = ref<any>(0)//用户2回合
const roundnum = ref<any>(null)
const isround = ref<any>(null)
const show = ref<boolean>(false)
const intervalId = ref<any>()
const speedList = ref<any[]>([]) //使用数组
onMounted(() => {
  getImageUrl.value = getAssetURL('user/4.jpg')
  getImageUrlItem.value = getAssetURL('monster/item_01.jpg')
  userInfo.value = useUserStore().info
  userInfo.value.name = useUserStore().name
  const skillsInfo = [
    { name: 'SkillsInfo1', value: userInfo.value.SkillsInfo1 },
    { name: 'SkillsInfo2', value: userInfo.value.SkillsInfo2 },
    { name: 'SkillsInfo3', value: userInfo.value.SkillsInfo3 },
    { name: 'SkillsInfo4', value: userInfo.value.SkillsInfo4 },
  ];
  skillsInfo.forEach((info) => {
    nextTick(() => {
    const { name, value } = info;
    const SkillsInfo = getsSkillsOne(Number(value));
    userInfo.value[name] = {
      Name1: SkillsInfo.name,
      value: SkillsInfo.value,
      type: SkillsInfo.cut,
    };
  });
  });
  userHP.value = userInfo.value.HP
  userSP.value = userInfo.value.Mana
  getMonster()

})
function getMonster() {
  const mapId = route.query.mapId
  let data = getMonsterOne(mapId)
  if (data) {
    userList1.value = data.Skills
    monsterInfo.value = data

    data.SkillsInfo.map((item: any, index:any) => {
      monsterInfo.value[`SkillsInfo${index + 1}`] = {
        Name1: data.Skills[index],
        value: item.split(':')[1],
        type: item.split(':')[0]
      }
    })
    monsterHP.value = monsterInfo.value.HP
    monsterSP.value = monsterInfo.value.Mana
    //开始战斗
    if (Number(userInfo.value.speed) > Number(monsterInfo.value.speed)) {
      isround.value = true
    } else {
      isround.value = false
    }
    startBattle(data.items)
  }
}
const startBattle = (items: any) => {
  intervalId.value = setInterval(() => {
    if (!isLook.value) {
      clearInterval(intervalId.value)
    }
    battleFrequency.value++ // 模拟战斗频率，实际应用中可以编写战斗逻辑
    decreaseMonsterALL()
  }, 500) // 1000毫秒，即1秒
}
const decreaseMonsterALL = () => {
  if (round1.value == 0 && round2.value == 0) {
    if (isround.value) {
      decreaseMonsterHP()
    } else {
      decreaseUserHP()
    }
  } else {
    if (isround.value) {
  
      if (round1.value > round2.value) {
        decreaseUserHP()
      } else {
        decreaseMonsterHP()
      }
    } else {
      if (round1.value > round2.value) {
        decreaseMonsterHP()
      } else {
        decreaseUserHP()
      }
    }
  }
}
const decreaseMonsterHP = () => {
  round1.value++
  if (round1.value == 1 || round1.value % 4 == 1) {
    if (userInfo.value.SkillsInfo1.type == 'aggressivity') {
      userInfo.value.aggressivity = (
        userInfo.value.SkillsInfo1.value * userInfo.value.aggressivity
      ).toFixed(0)
    }
    speedList.value.unshift({
      name: userInfo.value.name,
      type: '心法',
      skill: userInfo.value.SkillsInfo1.Name1,
      status: userInfo.value.SkillsInfo1.type,
      value: userInfo.value.SkillsInfo1.value,
      info: 'user'
    })
  } else if (round1.value == 2 || round1.value % 4 == 2) {
    USER_HP_DECREASE.value = (
      Number(userInfo.value.SkillsInfo2.value) +
      userInfo.value.aggressivity * 0.1
    ).toFixed(0)
    speedList.value.unshift({
      name: userInfo.value.name,
      type: '一技',
      skill: userInfo.value.SkillsInfo2.Name1,
      status: userInfo.value.SkillsInfo2.type,
      value: userInfo.value.SkillsInfo2.value,
      info: 'user'
    })
  } else if (round1.value == 3 || round1.value % 4 == 3) {
    USER_HP_DECREASE.value = (
      Number(userInfo.value.SkillsInfo3.value) +
      userInfo.value.aggressivity * 0.2
    ).toFixed(0)

    speedList.value.unshift({
      name: userInfo.value.name,
      type: '二技',
      skill: userInfo.value.SkillsInfo3.Name1,
      status: userInfo.value.SkillsInfo3.type,
      value: userInfo.value.SkillsInfo3.value,
      info: 'user'
    })
  } else if (round1.value % 4 == 0) {
    USER_HP_DECREASE.value = (
      Number(userInfo.value.SkillsInfo4.value) +
      userInfo.value.aggressivity * 0.5
    ).toFixed(0)

    speedList.value.unshift({
      name: userInfo.value.name,
      type: '绝技',
      skill: userInfo.value.SkillsInfo4.Name1,
      status: userInfo.value.SkillsInfo4.type,
      value: userInfo.value.SkillsInfo4.value,
      info: 'user'
    })
  }

  if (round1.value == 1 || round1.value % 4 == 1) {
  } else {
    if (Number(monsterHP.value) > 0) {
      monsterHP.value = String(Number(monsterHP.value) - USER_HP_DECREASE.value)
    } else {
      monsterHP.value = '0'
    }
  }
  calculatePercentages()
  checkBattleEnd()
}
const decreaseUserHP = () => {
  round2.value++
  if (round2.value == 1 || round2.value % 4 == 1) {
    if (monsterInfo.value.SkillsInfo1.type == 'aggressivity') {
      monsterInfo.value.aggressivity = (
        monsterInfo.value.SkillsInfo1.value * monsterInfo.value.aggressivity
      ).toFixed(0)
    }

    speedList.value.unshift({
      name: monsterInfo.value.name,
      type: '心法',
      skill: monsterInfo.value.SkillsInfo1.Name1,
      status: monsterInfo.value.SkillsInfo1.type,
      value: monsterInfo.value.SkillsInfo1.value,
      info: 'monsterInfo'
    })
  } else if (round2.value == 2 || round2.value % 4 == 2) {
    MONSTER_HP_DECREASE.value = (
      Number(monsterInfo.value.SkillsInfo2.value) +
      monsterInfo.value.aggressivity * 0.1
    ).toFixed(0)

    speedList.value.unshift({
      name: monsterInfo.value.name,
      type: '一技',
      skill: monsterInfo.value.SkillsInfo2.Name1,
      status: monsterInfo.value.SkillsInfo2.type,
      value: monsterInfo.value.SkillsInfo2.value,
      info: 'monsterInfo'
    })
  } else if (round2.value == 3 || round2.value % 4 == 3) {
    MONSTER_HP_DECREASE.value = (
      Number(monsterInfo.value.SkillsInfo3.value) +
      monsterInfo.value.aggressivity * 0.2
    ).toFixed(0)

    speedList.value.unshift({
      name: monsterInfo.value.name,
      type: '二技',
      skill: monsterInfo.value.SkillsInfo3.Name1,
      status: monsterInfo.value.SkillsInfo3.type,
      value: monsterInfo.value.SkillsInfo3.value,
      info: 'monsterInfo'
    })
  } else if (round2.value % 4 == 0) {
    MONSTER_HP_DECREASE.value = (
      Number(monsterInfo.value.SkillsInfo4.value) +
      monsterInfo.value.aggressivity * 0.5
    ).toFixed(0)

    speedList.value.unshift({
      name: monsterInfo.value.name,
      type: '绝技',
      skill: monsterInfo.value.SkillsInfo4.Name1,
      status: monsterInfo.value.SkillsInfo4.type,
      value: monsterInfo.value.SkillsInfo4.value,
      info: 'monsterInfo'
    })
  }
  if (round2.value == 1 || round2.value % 4 == 1) {
  } else {
    if (Number(userHP.value) > 0) {
      userHP.value = Number(userHP.value) - Number(MONSTER_HP_DECREASE.value)
    } else {
      userHP.value = '0'
    }
  }
  calculatePercentages()
  checkBattleEnd()
}
const decreaseMonsterSP = () => {
  if (Number(monsterSP.value) > 0) {
    monsterSP.value = String(Number(monsterSP.value) - MONSTER_SP_DECREASE)
  } else {
    monsterSP.value = '0'
  }
}
const decreaseUserSP = () => {
  if (Number(userSP.value) > 0) {
    userSP.value = String(Number(userSP.value) - USER_SP_DECREASE)
  } else {
    userSP.value = '0'
  }
}
const calculatePercentages = () => {
  monsterpercent.value = ((Number(monsterHP.value) / Number(monsterInfo.value.HP)) * 100).toFixed(0)
  monsterpercentsp.value = (
    (Number(monsterSP.value) / Number(monsterInfo.value.Mana)) *
    100
  ).toFixed(0)
  usepercent.value = ((Number(userHP.value) / Number(userInfo.value.Mana)) * 100).toFixed(0)
  usepercentsp.value = ((Number(userSP.value) / Number(userInfo.value.Mana)) * 100).toFixed(0)
}
const checkBattleEnd = () => {

  if (Number(monsterHP.value) <= 0) {
    // notification.success({ message: 'Notification Title', description: '赢了' })
    isLook.value = false
    monsterHP.value = '0'
    clearInterval(intervalId.value)
    let index = Math.floor(Math.random() * monsterInfo.value.items1.length)
    showDialog({
      title: '标题',
      message:
        userInfo.value.name +
        '获得' +
        getMaterialOne(monsterInfo.value.items1[index]).name +
        ',经验:' +
        monsterInfo.value.experience
    }).then(() => {
      let data = {
        userId: useUserStore().userId,
        articleid: monsterInfo.value.items1[index],
        name: getMaterialOne(monsterInfo.value.items1[index]).name,
        type: getMaterialOne(monsterInfo.value.items1[index]).infotype,
        num: 1,
        userName: useUserStore().name,
        level: 1
      }
      addArticle(data).then((item: any) => {
        console.log(1111)
      })
      router.back()
    })
  } else if (Number(userHP.value <= 0)) {
    isLook.value = false
    clearInterval(intervalId.value)
    userHP.value = '0'
    showDialog({
      title: '标题',
      message: '挑战失败'
    }).then(() => {
      router.back()
    })
  }
}
</script>
<style lang="scss" scoped>
.enemyinfo {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  @extend %newApp;
}

.userInfo {
  position: fixed;
  /* width: 100%; */
  bottom: 10px;
  right: 0px;
  padding: 10px;
  left: 0px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  @extend %newApp;
}

%newApp {
  .Item {
    display: flex;
    align-items: center;
  }

  .ItemRight {
    padding-left: 10px;
    width: 80%;
  }

  .ItemName {
    font-size: 18px;
    color: #1890ff;
  }

  .ItemHp {
    color: #ee0a24;
    font-size: 18px;
  }

  .ItemSp {
    font-size: 18px;
    color: #1f74fc;
  }
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-3px, 0);
  }

  20% {
    transform: translate(3px, 0);
  }

  30% {
    transform: translate(-3px, 0);
  }

  40% {
    transform: translate(3px, 0);
  }

  50% {
    transform: translate(-3px, 0);
  }

  60% {
    transform: translate(3px, 0);
  }

  70% {
    transform: translate(-3px, 0);
  }

  80% {
    transform: translate(3px, 0);
  }

  90% {
    transform: translate(-3px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

.img {
  animation: shake 5s infinite;
}

.check {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
}
</style>


